<template>
	<div id="caipiao">
		<ul v-for="(items,key) in allGames" :key="key">
			<li v-for="(item,key) in items.games" :key="key">
				<img :src='"http://192.168.2.245:3000"+item.icon2' />
				<span>{{item.cn}}</span>
			</li>
			<li>
				<i class="el-icon-plus" 
				style="width:100px;height: 100px;"
				@click="addCaipiaoView=true"></i>
			</li>
		</ul>
		<add-caipiao-view :addCaipiaoView='addCaipiaoView'></add-caipiao-view>
	
	</div>
</template>
<script>
import addCaipiaoView from './addCaipiaoView'
	export default {
		components:{addCaipiaoView},
		data() {
				return {
					addCaipiaoView:false
				}
			},
		mounted(){
			this.$store.dispatch('loadAllGames');
		},
		computed:{
			allGames(){
				return this.$store.getters.allGames;
			}
		},
		methods: {
				
				
			}
	}
</script>
<style lang="scss" scoped>
	.el-icon-plus{
		font-size: 30px;
		border: 1px dashed lightgray;
		border-radius: 6px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255,255,255,0.5);
	}
	#caipiao ul{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		li{
			width: 90px;
			height: 90px;
			margin-left: 20px;
		}
	}
	#caipiao ul li{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
</style>